<template>
  <div>
    <!-- 上 -->
    <div class="bg">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="" />
      <div class="kp">
        <div class="user">
          <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="" />
        </div>
        <p>游客</p>
        <button @click="$router.push('/login')">去登录</button>
      </div>
    </div>
    <!-- 中 -->
    <div class="icon">
      <p><van-icon name="star-o" size="25" /><i>我得收藏</i></p>
      <p><van-icon name="wap-home-o" size="25" /><i>我得出租</i></p>
      <p><van-icon name="underway-o" size="25" /><i>看房记录</i></p>
    </div>
    <div class="icon">
      <p><van-icon name="vip-card-o" size="25" /><i>成为房主</i></p>
      <p><van-icon name="manager-o" size="25" /><i>个人资料</i></p>
      <p><van-icon name="service-o" size="25" /><i>联系我们</i></p>
    </div>
    <!-- 下 -->
    <div class="pic">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'user-page'
}
</script>

<style scoped lang="less">
// 上
.bg {
  height: 300px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .kp {
    width: 320px;
    height: 165px;
    background: rgb(255, 255, 255);
    box-shadow: 1px 1px 10px #ccc;
    position: absolute;
    bottom: 0px;
    left: 27.5px;
    text-align: center;
    .user {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: rgb(255, 255, 255);
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      border: 5px solid rgb(235, 232, 232);
    }
    button {
      font-size: 13px;
      height: 30px;
      line-height: 30px;
      padding: 0 15px;
      background-color: #21b97a;
      border-radius: 5px;
      color: rgb(255, 255, 255);
      margin-top: 30px;
    }
    p {
      margin-top: 50px;
    }
  }
}
// 中
.icon {
  display: flex;
  flex-wrap: wrap;
  margin: 30px 0px;
  p {
    width: 33.3333333%;
    height: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
}
.pic {
  margin: 10px;
  height: 85px;
  img {
    height: 100%;
    width: 100%;
  }
}
</style>
